<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        ajax 前后端交互的一种技术 
        a  async 异步 
        j  JavaScript
        a  and 
        x  xml 


        // 前后端交互 步骤  

        // 给女神打电话                       // ajax 

        // 1. 先有手机                      // 1.创建ajax对象
        // 2. 知道女神的手机号码             // 2. 配置本次请求的信息(服务器的地址)
        // 3. 拨通号码                      // 3. 把本次请求发出去 
        // 4. 等到女神的回应                //  4. 获取服务器响应数据  






     -->
     <!-- <form action="https://www.baidu.com" method="post">
        <input type="text" name="username">
        <input type="text" name="password">
        <button>提交</button>

     </form> -->

     <!-- get  表单的数据 查询字符串的形式拼接在url后边  速度快 不安全 -->
     <!-- post  速度慢 安全 -->


     <script>

        /* ajax 请求步骤 
            1. 创建ajax 对象 
                const xhr = new XMLHttpRequest();
            2. 配置请求信息 
                xhr.open(请求方式,请求地址,是否是异步)
                请求方式:  查看接口文档
                    1.get 
                    2.post
                    3. ...
                请求地址:  查看接口文档 
                是否是异步: 默认是异步  true 异步   false 同步  
            3. 请求发出去  
                xhr.send()
            4. 配置一个请求完成事件 
                xhr.onload = function(){
                    xhr.responseText  来自服务端的返回数据 
                }
    
    
        */

        // const xhr = new XMLHttpRequest();

        // xhr.open('get','http://localhost:8080/test/first',true);

        // xhr.send();

        // xhr.onload = function(){
        //     console.log(xhr.responseText);
        // }



        // const xhr = new XMLHttpRequest();

        // xhr.open('get','http://v.juhe.cn/joke/content/list.php?sort=asc&time=1691720197&key=10524c3664d0a405de6fe28039658076',true);

        // xhr.send();

        // xhr.onload = function(){
        //     console.log(xhr.responseText);
        // }

     </script>

</body>
</html>